<template>
    <div>
        <div class="banner">
            <MainNav :logo="tree.index_logo.children"></MainNav>
            <div class="banner carousel">
                    <CarouselIndex :carouselImgs="tree.index_carousel.children" :height="500"></CarouselIndex>
            </div>
        </div>
        <div class="index-container">
            <Row :gutter="8">
                <Col span="6">
                    <div class="service-title">
                        <span class="font">专项服务</span>
                    </div>
                    <div class="service-container font">
                        <ul>
                            <li v-for="(item,key) in tree.usual_service.children" class="service-lis" :key="key" >
                                <router-link :to="item.url=='#'?{name:'module_article_list_tab',params:{name:item.name,p_type:'*'}}:{path:item.url}">{{item.name}}</router-link>
                                <Row>
                                    <Col span="8" class="service-col"  v-for="(item2,key) in item.children" :key="key">
                                        <router-link :to="item2.url=='#'?{name:'module_article_list_tab',params:{name:item.name,p_type:item2.name}}:{path:item2.url}">{{item2.name}}</router-link>
                                    </Col>
                                </Row>
                            </li>
                        </ul>
                    </div>
                    <a :href="adImage.path"> 
                        <div class="index-container-ad bg" :style="{backgroundImage:'url('+adImage.url+')'}"></div>
                    </a> 
                </Col>
                <Col span="12">
                        <Service :content="this.list.serviceanddemand"></Service>
                </Col>
                <Col span="6">
                    <div class="index-container-right font">
                        <div class="index-announce">
                            <div class="service-title">
                                <router-link :to="{path: 'index/article/list/notice/*'}">通知公告</router-link>   
                            </div>
                            <ul class="Info-content font announce">
                                    <li v-for="(item,key) in list.navInfo['通知公告']" :key="key">
                                    <router-link :to="{path:'index/article/detail/notice/'+item.id}"> <Icon type="volume-medium" style="margin:0 5px;" ></Icon>
                                        {{item.title.length > 13?item.title.substring(0,13)+'...':item.title}}
                                    </router-link>
                                    <span style="float:right;padding-right:3px;color:#1f4f88;font-size:14px;line-height:30px">
                                        {{new Date(parseInt(item.create_time)).getMonth()+1+"-"+new Date(parseInt(item.create_time)).getDate()}}
                                    </span>
                                    </li> 
                            </ul>
                        </div>
                        <div class="index-button">
                            <div class="button-left"><router-link :to="{name: 'find_demand'}">找需求</router-link></div>
                            <div class="button-right"><router-link :to="{name: 'find_service'}">找服务</router-link></div>
                        </div>
                    </div>
                </Col>
                    <Col span="18">
                    <div class="index-company">
                    <Row class="company">
                        <Col span="4">
                            <router-link :to="{path:'/index/find_agen_com?rtype=5&mtype=%2a&searchitem='}" class="c_tit" style="width: 100px;">入驻机构</router-link> 
                        </Col>
                        <Col span="4" v-for="(item,key) in list.serviceCompany" style="padding:4px;" :key="key">
                            <router-link :to="{path:'/index/personal_exhibition/'+item.id}" class="company-imgs" :title="item.enterprise_name" ><img :src="item.logo" style="width:100%;height:100px" ></router-link> 
                        </Col>
                    </Row>
                        <Row class="company">
                        <Col span="4">
                            <router-link :to="{path:'/index/find_agen_com?rtype=4&mtype=%2a&searchitem='}" class="c_tit" style="width: 100px;">注册企业</router-link> 
                        </Col>
                            <Col span="4" v-for="(item,key) in list.Company" style="padding:4px;" :key="key" >
                            <router-link :to="{path:'/index/personal_exhibition/'+item.id}" class="company-imgs" :title="item.enterprise_name"><img :src="item.logo" style="width:100%;height:100px" ></router-link> 
                        </Col>
                    </Row>
                    </div>
                </Col>
            </Row>  
            <Row>
                <Col span="24" style="margin-top:10px;margin-bottom:10px;">
                        <CarouselAd :carouselImgs="tree.mid_carousel.children" :height="130"></CarouselAd>
                </Col>
            </Row>
            <Row :gutter="8" style="margin-top:10px">
                <Col span="12">
                    <New :content="list.navInfo" :lastest="list.lastArticle" :latestNews="list.latestnews"></New>
                </Col>
                <Col span="12">
                    <Abutment :content="list.Abutment"></Abutment>
                </Col>
            </Row>
            <Row style="margin-top:10px">
                    <BaiduMap v-if="show_map" :data="list.allService"></BaiduMap>
            </Row>
        </div>
         <BackTop></BackTop>
        <MainFooter></MainFooter>
    </div> 
</template>
<script>
/* 
    2018/01/08
    author:liumingyuan
*/
import CarouselIndex from './main-components/Carousel'
import CarouselAd from './main-components/midCarousel'
import BaiduMap from './main-components/BaiduMap'
import MainNav from './main-components/nav'
import Abutment from './main-components/abutment'
import New from './main-components/news'
import Service from './main-components/service'
import MainFooter from './main-components/footer'
import Page from '@/common/model/Page'

export default {
    data(){
        return{
            content:[],
            lastest:[],
            latestnews:[],//新添的最新消息
            show_map: false,
            carouselImgs: [
                {
                    src: ""
                },
                {
                    src: ""
                },
                {
                    src: ""
                },
            ],
            carouselAdImgs: [
                {
                    
                    src: ""
                },
                {
                        
                    src: ""
                }
            ],
            service:[],       
            list:{
                Company: [],  //这些都是由后台赋值的  apicommon.cs
                navInfo: {
                    // "通知公告":'',
                    // "政策法规":'',
                    // "通知公告":''
                },
                lastArticle: [],
                latestnews:[],//新添的最新消息
                Abutment: {},
                serviceCompany: [],
                service: [],
                demand: [],
                allService: []
            },
            adImg:{path:'',url:''}
       }
    },
    computed: {
        tree() {
            return this.$store.state.app.dicTree;
        },
        adImage(){
            if(this.tree.ad_image.children.length != 0){
                this.adImg.url = this.tree.ad_image.children[0].logo[0].url;
                this.adImg.path = this.tree.ad_image.children[0].url;
            }else{
                this.adImg.path = '/index';
                this.adImg.url =  "";
            }
            return this.adImg;
        }
    },
    methods:{
    },
    components:{
        CarouselIndex, BaiduMap,MainNav,New,MainFooter,Service,Abutment,CarouselAd
    },
    created(){
        console.log(this);
        this.api.post("index_message/getMessage",{news_page_size: 8,serviceMember_page_size: 5, company_page_size: 5, service_page_size: 8,demand_page_size: 8,abutment_page_size:8},res =>{
            this.list = res.data;
            this.show_map = true;
        }, { cache: true });
    }
}
</script>
<style scoped>
    .banner{
        width: 100%;
        height: 500px;
        min-width:960px;
    }
    .carousel{
        position: absolute;
        margin-top: -100px;
        z-index: 1;
    }
    .font{
        font-family: "微软雅黑";
    }
    
     .index-container{
         width: 58%;
         min-width: 960px;
         margin: 10px auto;
     }
    .service-title{
        height: 45px;
        line-height: 45px;
        text-align: center;
         font-size: 20px;
         font-weight: 700;
        color: #ffffff;
          background-color: #143f87;
        /* background: url(../images/title_bg.png) repeat-x; */
    }
    .service-container{
         height: 470px;
         background-color: #fff;
        border: 1px solid rgb(11, 163, 241); 
        margin-bottom:10px;
    }
    .service-container>ul>li{
        width: 100%;
        height: 90px;
        text-align: center;
        font-size: 20px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .service-lis{
        float: left;
    }
    .service-lis>a{
        text-decoration: none;
        color:#ee9b4e;
    }
    .service-lis>a:hover{
        font-weight: 700;
    }
    .service-col a{
        text-decoration: none;
        color:#1f4f88;
        font-size: 14px;
    }
     .service-col a:hover{
          font-weight: 700;
     }
    
    
    .index-container-right{
        width: 100%;
        height:395px;
        color: #ffffff;
        font-size: 20px;
    }
    .index-announce{
        height: 295px;
        width: 100%;
        border: 1px solid #aaaaaa;
    }
    .index-button{
        height:99px;
    }
    .button-left a,.button-right a{
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
        height:40px;
        line-height: 40px;
        background-color: #f7822c;
        color: #ffffff;
    }
     .button-left a:hover,.button-right a:hover{
         font-weight: 700;
         background-color: #ee6808;
    }
    .service-title a{
        text-align: center;
        color:#ffffff;
    }
    .service-title:hover{
        background-color: rgb(31, 83, 141);
    }
    .announce{
        padding: 0;
    }
    .announce a{
        float: left;
        display: block;
        height:30px;
        line-height: 30px;
        width: 85%;
        color: #1f4f88;
        font-size: 14px;
        overflow: hidden;
    }
    .index-company{
        height:200px;
        width:100%;
        margin-top: 10px;
        padding-top: 5px;
    }
     .company{
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding-top:2px;
    }
        .company .c_tit {
            position: relative;
            float: left;
            display: block;
            height: 100px;
            background-color: #f7822c;
            text-align: center;
            line-height: 100px;
            border-radius:50px;
            font-size: 20px;
            color:#ffffff;
        }
        .company img{
            border: 1px solid #ddd;
          
        }

        .company .c_tit:hover{
            cursor: pointer;
            color: #fff;
            background-color: #2e82ff;
        }
        .company .company-imgs{
            height: 100px;
            width: 100%;
        }
    .index-container-ad{  
        height: 120px;
        width: 100%;
        }
    .bg{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
    }
 
</style>